<template>
    <div class="berthMlonitoring"  >
        <el-popover
                @show="showVideo"
                @hide="hideVideo"
                width="400"
                placement="right"
                trigger="click">

            <div class="imgBox" v-loading="loading">
                <div v-for="(item,index) in newData" class="ifrItem" >
                    <div class="mask"  ></div>
                    <video :ref="'player'+index" width="100%" height="100%"  @click="getBigger(item,index)"></video>
                </div>
<!--                                    <video ref="player" width="100%" height="100%"></video>-->

            </div>

           <slot slot="reference" />
        </el-popover>
        <el-dialog v-loading="loading"  width="80%" height="500px" :visible.sync="dialogTableVisible" center :before-close="handleClose">
<!--            <iframe :src="active.url"  frameborder="0" style="width: 100%;height: 100%;z-index: 2027"  scrolling="yes"></iframe>-->
            <video ref="playerAll" width="100%" height="100%"></video>
        </el-dialog>
    </div>
</template>

<script>
    import flvjs from 'flv.js'

    export default {
        name: "berthMlonitoring",
        props:{
            berthName:{
                type:String
            }
        },
        activated(){
           // this.createVideo()

        },
        mounted(){


        },
        methods:{
            //显示弹框
            showVideo(){
                this.$nextTick(() => {
                    if(this.berthName){
                        if(!this.berthName.includes('#')){
                            this.$message.error('当前泊位未查询到对应监控');
                            return
                        }
                        this.newData = []
                        let berthArr = this.berthName.replace(/[^0-9]/ig,"");
                        if(berthArr&&berthArr<13){
                            console.log('Number(berthArr[1])',Number(berthArr)-1)
                            this.newData = this.datas[Number(berthArr)-1]
                            this.datas[Number(berthArr)-1].map((item,index)=>{
                                console.log(item,'isURL')
                                setTimeout(()=>{
                                    this.createVideo(item,index)
                                },500)
                            })
                        }else{
                            this.$message.error('未获取到当前泊位相关监控');
                        }

                    }else{
                        this.$message.error('未获取到泊位名');
                    }

                })
            },
            //隐藏弹框
            hideVideo(){
                this.closeVideo()
                this.dialogTableVisible = false
                this.active = ""
            },
            //关闭时销毁视频
            handleClose(){
                this.closeVideo()
                this.dialogTableVisible = false
                this.active = ""
            },
            //视频初始化
            createVideo(url,index) {
                // 初始化执行
                if (flvjs.isSupported()) {
                    let video = index=='All'?this.$refs['player'+index]:this.$refs['player'+index][0];
                    if (video) {
                        this.playerObj[index] = flvjs.createPlayer({
                            type: "flv",
                            isLive: true,
                            url: `ws://192.168.75.140:8091/rtsp/12/?url=${url}`
                        });
                        this.playerObj[index].attachMediaElement(video);
                        try {
                                this.playerObj[index].load();
                                this.playerObj[index].play();
                                console.log('currentTime--->',video.currentTime)
                                // video.addEventListener('timeupdate', function (e) {
                                //     if(video.currentTime>0){// 当前播放的进度
                                //         this.loading =  false
                                //     }else{
                                //         this.loading =  true
                                //
                                //     }
                                // })
                            // },1000)



                        } catch (error) {
                            console.log(error);
                            // this.loading = false

                        };
                    }
                }
            },
            // 销毁视频
            closeVideo(){
                // 关闭执行
                for(var i in this.playerObj){
                    let item = this.playerObj[i]
                    item.pause()
                    item.unload()
                    item.detachMediaElement()
                    item.destroy()
                    delete  this.playerObj[i]
                }


            },
            //最大化视频弹框
            getBigger(val,index){
                this.closeVideo()
               this.dialogTableVisible = true
                this.active = index
                this.$nextTick(() => {
                    this.createVideo(val,'All')
                })
            }
        },
        destroyed(){
            this.closeVideo()
        },
        data(){
            return {
                playerObj:{},
                loading:false,
                rtsp:"rtsp://172.16.3.10:64006/Streaming/Channels/5497558140239",
                // rtsp:"rtsp://172.16.3.10:64006/Streaming/Channels/5497558140293",
                player:null,
                dialogTableVisible:false,
                active:"",
                data:[

                    {
                        url:"rtsp://172.16.3.10:64006/Streaming/Channels/5497558140239"
                    },
                    {
                        url:"rtsp://172.16.3.10:64006/Streaming/Channels/5497558140293"
                    },
                    {
                        url:"rtsp://172.16.3.10:64006/Streaming/Channels/5497558140272"
                    },
                    {
                        url:"rtsp://172.16.3.10:64006/Streaming/Channels/5497558140290"
                    },
                ],
                newData:[],
                datas:[
                    //一号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229136', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229140', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229144', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229148', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229152', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229156'],
                    // 二号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229160', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229164', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229168', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229172', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229176'],
                    //三号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229180', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229184', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229188'],
                    // 四号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229192', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229196', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229200'],
                    // 五号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229204', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229208', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229212', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229216', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229220'],
                    // 六号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229224', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229228', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229232', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229236'],
                    //七号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229240', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229244', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229248', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229252'],
                    //八号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229260', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229264', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229268', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229272'],
                    //九号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229276', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229280', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229284', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229288'],
                    //十号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229292', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229296', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229300', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229304', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229308', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229312'],
                    // 十一号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229316', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229320', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229324', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229328', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229332'],
                    //十二号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229336', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229340', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229344', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229348', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229352'],
                    //十三号泊位
                    ['rtsp://172.16.3.15:64006/Streaming/Channels/21483229356', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229360', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229364', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229368', 'rtsp://172.16.3.15:64006/Streaming/Channels/21483229372']
                ]
            }
        }
    }
</script>

<style scoped>
    /deep/ .el-dialog__header{
        border:0!important;
    }
.imgBox{
    display: flex;
    flex-wrap:wrap;
}
    .ifrItem{
        border: 1px solid white;
        box-sizing: border-box;
        width: 50%;
        height: 150px;
        box-sizing: border-box;
        position: relative;
        background: #000;

    }
    .ifrItemBig{
        width: 60%;
        height: 550px;
        box-sizing: border-box;
        position: fixed;
        left: 20%;
        top: 150px;
        transition: all .5s inherit;
        background: #000;

    }
    .mask{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
<style>
    .el-dialog{
        margin-top: 8vh!important;
    }
</style>